<template>
  <div class="view-wrapper">
    <div class="head">
      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
        <el-form-item label="关键词" prop="query">
          <el-input v-model="queryParams.query" placeholder="订单编号、备注" clearable size="small"
            @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="会员查询" prop="query">
          <el-input v-model="queryParams.query" placeholder="姓名、手机号" clearable size="small"
            @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="交易类型："  prop="relevancyType">
          <el-select v-model="queryParams.relevancyType" placeholder="全部" size="small">
            <el-option v-for="item in relevancyTypeList" :key="item.id" :label="item.value" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="交易时间："  prop="date">
          <el-date-picker v-model="date" start-placeholder="开始日期" end-placeholder="结束日期" :clearable="false"
            type="daterange" format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 380px" @change="changeTime">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    
    <div class="listBox">
      <div class="topBtn" style="margin-bottom: 14px">
        <div>
          <export-excel-button
            title="资金明细列表"
            action="/integral/record/v1/export"
            :params="ExportParams"
          />
        </div>
      </div>
      <el-table v-loading="loading" :data="customerList" stripe border>
        <el-table-column label="序号" type="index" width="55" align="center" fixed />
        <el-table-column label="订单编号" align="center" prop="orderNo" :show-overflow-tooltip="true" />
        <el-table-column label="手机号" align="center" prop="voucher" :show-overflow-tooltip="true"/>
        <el-table-column label="用户姓名" align="center" prop="phone" :show-overflow-tooltip="true" />
        <el-table-column label="交易类型" align="center" prop="name" :show-overflow-tooltip="true"/>
        <el-table-column label="交易金额(￥)" align="center" prop="platformAssetType" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <dict-tag :options="platformAssetTypeList" :value="scope.row.platformAssetType" />
          </template>
        </el-table-column>
        <el-table-column label="交易时间" align="center" prop="assetChangeType" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <dict-tag :options="assetChangeTypeList" :value="scope.row.assetChangeType" />
          </template>
        </el-table-column>
        <el-table-column label="备注" align="center" prop="amount" :show-overflow-tooltip="true" />
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    </div>
  </div>
  
</template>

<script>
  import {
    adminDict,
    integralList,
    integralStatistics,
  } from "@/api/integralOperation/integralRunDetail";
  import ExportExcelButton from "@/components/ExportExcelButton/index";
  export default {
    name: "Customer",
    components: {
      ExportExcelButton,
    },
    data() {
      return {
        id: '',
        pathType: 'add',
        // 遮罩层
        loading: false,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 会员列表表格数据
        customerList: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          endTime: null,//交易结束时间
          startTime: '',
          isChain: '',//是否上链 1 待上链 2 上链
          platformAssetType: null,//积分类型 platform_asset_type 4神椰coco 5椰分
          query : '',//手机号/姓名/订单号
          relevancyType: null,//交易类型
          assetChangeType: null,//类型 platform_wallet_asset_change_type
        },
        date: [],
        statusList:[
          {id: '',value: '全部',},
          {id: '1',value: '显示',},
          {id: '2',value: '隐藏',},
        ],
        relevancyTypeList: [
          {id: '',value: '全部'}
        ],
        platformAssetTypeList: [
          {id: '',value: '全部'}
        ],
        assetChangeTypeList:[
          {id: '',value: '全部'}
        ],
        chainList: [
          {id: '',value: '全部'},
          {id: '1',value: '待上链'},
          {id: '2',value: '上链'}
        ],
        statisticsData: {},
      };
    },
    computed: {
      ExportParams() {
        const params = {
          ...this.queryParams,
        };
        return params;
      },
    },
    created() {
      this.getadminDict();
      this.getAssetChangeType();
      this.getStatic();
      this.getList();
    },
    methods: {
      getadminDict() {
        //获取商户类型字典
        const params = {
          dictType: "platform_wallet_log_business_type,platform_asset_type  ",
        };
        adminDict(params).then((res) => {
          this.relevancyTypeList = this.relevancyTypeList.concat(res.result[0].dictList);
          this.platformAssetTypeList = this.platformAssetTypeList.concat(res.result[1].dictList);
        });
      },
      getAssetChangeType() {
        //获取类型字典
        const params = {
          dictType: "platform_wallet_asset_change_type",
        };
        adminDict(params).then((res) => {
          this.assetChangeTypeList = this.assetChangeTypeList.concat(res.result[0].dictList);
        });
      },
      /** 查询竞猜活动列表 */
      getList() {
        this.loading = true;
        integralList(this.queryParams).then(response => {
          this.total = response.result.total
            this.customerList = response.result.records
            this.customerList = this.customerList.map(item => {
              // console.log('item',item)
              Object.keys(item).forEach(key => {
                if (item[key] === '') {
                  item[key] = '-'
                }
              })
              return item
            })
            
            this.loading = false;
          
        }).finally(()=>{
          this.loading = false;
        })
      },
      /* 获取统计数据 */
      getStatic(){
        integralStatistics().then(res => {
          this.statisticsData = res.result
        })
      },
      //处理时间
      changeTime(e){
        console.log('e',e)
        this.queryParams.startTime = e[0]
        this.queryParams.endTime = e[1]
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
        this.getStatic();
      },
      /** 重置按钮操作 */
      resetQuery() {
        // this.resetForm();
        this.$refs["queryForm"].resetFields();
        this.date = []
        this.queryParams.startTime = ''
        this.queryParams.endTime = ''
        console.log('this.queryParams', this.queryParams)
        this.handleQuery();
      },
      /** 详情按钮操作 */
      handleView(row,type) {
        // this.$refs.dialog.open(row.id, true);
        this.$router.push({
          path: "/members/Prepaid-details",
          query: {
            id: row.id,
            type: type
          },
        })
      },
      //活动配置
      _handleSuccess(data) {
        console.log("data", data);
        this.queryParams.pageNum = 1
        this.getList();
      },
      typeatter(row){
        if(row.type == 1){
          return '支持竞猜'
        }else if(row.type == 2){
          return '冠军竞猜'
        }
      },
      isChainatter(row){
        if(row.isChain == 1){
          return '待上链'
        }else if(row.isChain == 2){
          return '已上链'
        }else{
          return '-'
        }
      },
      /* 评论 */
      handleConfig(row){
        this.id = row.id
        this.dialogListShow = true
      },
    }
  };

</script>
<style lang="scss" scoped>
  .head {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px 0;
    
  }
  .head_st{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    border-radius: 8px;
    margin-bottom: 14px;
    background: #F3F5F7;
  }
  .card_d{
      // width: 420px;
      padding: 0 0px 0 20px;
      height: 100px;
      border-radius: 10px;
      display: flex;
      justify-content: space-between;
      margin-right: 14px;
      background-color: #fff;
      margin-bottom: 10px;

      .list{
        display: flex;
        flex-direction: column;
        flex: 1;
        align-items: center;
        justify-content: center;
        margin-right: 20px;
        p:nth-child(1){
          font-size: 20px;
          font-weight: bold;
          color: #555;

        }
        p:nth-child(2){
          font-size: 18px;
          color: #555;
          margin-top: 20px;
        }
      }
    }
  .listBox {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    //   height: 120px;
    padding: 20px 20px;
    margin-top: 10px;
  }
  .topBtn{
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
</style>
